<!-- 区域 -->
<template>
  <view class="content">
    <view class="topContent">
      <!-- 顶部悬浮框 -->
      <van-search shape="round" :value="searchMap" background="transparent" placeholder="请输入村庄名称或地名快速定位" use-action-slot
        @change="($event)=>getDefaultAddress($event.detail)" @search="onSearch" style="padding-left: 0 "
        custom-class="searchClass">
        <view slot="label" class="selectArea">
          <span class="dataInputText" @click="toClickDatePicker">
            {{formData.areaName}}
            <van-icon class="selectIcon" name="arrow-down" />
          </span>
          <uni-data-picker :isShowInput="false" ref="datePicker" v-model="formData.regionId" split="·" :border="false"
            class="dataPicker" clear-icon :localdata="dataTree" :map="{text: 'departName', value:'id'}"
            popup-title="请选择区域" @change="onchange" @nodeclick="nodeClick"></uni-data-picker>
        </view>
      </van-search>
      <view v-if="villageId" class="terminal-card">
        <image src="@/static/manage/packUp.png" class="packUpIcon" @click="villageId=''"></image>
        <view class="card-title" @click="toVillageDetail(villageInfo)">
          <span class="title-icon"></span>
          <span>{{ villageInfo.villageName }}</span>
          <van-tag class="marClass" v-if="villageInfo.attr === 2" color="#E5EEFF" text-color="#3C8AFF">自然村</van-tag>
          <van-tag class="marClass" v-if="villageInfo.attr === 1" color="#D5EFE7" text-color="#74CDAF">纳场村</van-tag>
          <span class="descBusiness">运维企业：{{villageInfo.enterpriseName}}</span>
        </view>
        <view class="infoList" @click="toVillageDetail(villageInfo)">
          <!-- || (villageInfo.attr === 1 && item.name !== '1') -->
          <view v-show="villageInfo.attr === 2 " v-for="item in terminalInfoList" :key="item.name" class="infoItem">
            <view class="infoValue" :style="{'color':item.color}">
              <span v-if="item.name !== '8'"
                class="value">{{ item.name === '7' ? item.value : villageInfo[item.prop] }}</span>
              <span class="unit">{{ item.name !== '8' ? item.unit : (villageInfo[item.prop] || '暂无数据')  }}</span>
            </view>
            <view>{{item.label}}</view>
          </view>
          <view v-show="villageInfo.attr === 1 " v-for="item in terminalInfoList1" :key="item.name" class="infoItem">
            <view class="infoValue" :style="{'color':item.color}">
              <span v-if="item.name !== '8'"
                class="value">{{ item.name === '7' ? item.value : villageInfo[item.prop] }}</span>
              <span class="unit">{{ item.name !== '8' ? item.unit : (villageInfo[item.prop] || '暂无数据')  }}</span>
            </view>
            <view>{{item.label}}</view>
          </view>
        </view>

      </view>
      <view v-if="villageId && villageInfo.attr === 2" class="terminalStatus">
        <image src="/static/icon/terminalStatusIcon.png" class="icon" />
        终端状态
        <span v-if="terminalList[0].status === 1" class="statusText">运行正常</span>
        <span v-if="terminalList[0].policeStatus === 2" class="statusText" style="color: #FC8382">运行异常</span>
        <span v-if="terminalList[0].status === 2" class="statusText" style="color: #8E8E8E">未运行</span>
      </view>

    </view>

    <!-- 地图控件-->
    <map id="map" :class="{'heightMini': orgType !== '6'}" :longitude="longitude" :latitude="latitude" :scale="scale"
      :markers="markers" @markertap="markertap">
      <cover-view slot="callout">
        <!-- {{ marker.areaName }} -->
        <cover-view v-for="(marker, index) in markers" :key="marker.villageId" :marker-id="marker.id"
          class="areaNameMarker"
          :style="{'backgroundColor':  marker.customCallout.bgColor}">{{ marker.areaName }}</cover-view>
      </cover-view>
    </map>

    <!-- 右下悬浮框 -->
    <view class="rightBottomContent">
      <image @click="openAreaDataStatistic" src="/static/manage/areaData.png" class="operateIcon" />
      <view @click="openAreaDataStatistic">区域数据</view>
      <image @click="toYunweiStatistic" src="/static/manage/yunwei-manage.png" class="operateIcon" />
      <view @click="toYunweiStatistic">运维管理</view>
      <image @click="toWorkAuditPage" src="/static/manage/workIcon.png" style="width: 35rpx;height: 37rpx"
        class="operateIcon" />
      <view @click="toWorkAuditPage">作业审批</view>
      <view @click="toMine">
        <image :src="avatar" class="defaultAvatar"></image>
      </view>
    </view>

    <!-- 左下区域数据悬浮框 -->
    <MovableView :areaData="showAreaData" />
  </view>
</template>

<script>
import amap from '@/plugins/amap-wx.130.js'
import MovableView from '@/components/movable-view/movable-view.vue';
import { wgs84togcj02 } from '@/utils/coordtransform.js';
import { getNodePath } from '@/utils/treeOperate'
import { getAreaTreeList, terminalMapPointQuery, pipPointQuery } from '@/api/area'
import { Debounce } from '@/utils/debounce'
import { getVillagePoint, getVillageInfoStatistic } from '@/api/manage'
export default {
  components: { MovableView },
  data() {
    return {
      showAreaData: false,
      // areaName:'请选择',
      villageInfo: {
        villageName: '汪家村',
        terminal: '1',
        equipment: '2',
        exception: '1',
        om: '1',
        alarm: '5',
        avgResTime: '4',
        frequency: '2',
        date: '2025-06-09'
      },
      terminalList: [],
      villageId: '', // 选中的villageID
      terminalInfoList: [
        { label: '终端数量', value: '1', prop: 'terminal', unit: '个', color: '#09C4AB', name: '1' },
        { label: '设备数量', value: '2', prop: 'equipment', unit: '个', color: '#FA9049', name: '2' },
        { label: '运行异常', value: '1', prop: 'exception', unit: '个', color: '#FF6E6E', name: '3' },
        { label: '运维总数', value: '1', prop: 'om', unit: '次', color: '#745EF2', name: '4' },
        // { label: '累计报警', value: '5', prop: 'alarm', unit: '次', color: '#FC8382', name: '5' },
        // { label: '平均响应时长', value: '4', prop: 'avgResTime', unit: 'h', color: '#61BDFB', name: '6' },
        { label: '运维频次', value: '1', prop: 'frequency', unit: '次/月', color: '#7B9CE3', name: '7' },
        { label: '最近一次运维时间', prop: 'date', unit: '2025-06-09', color: '#FFBF10', name: '8' },
      ],
      terminalInfoList1: [
        { label: '设备数量', value: '2', prop: 'equipment', unit: '个', color: '#FA9049', name: '2' },
        { label: '运行异常', value: '1', prop: 'exception', unit: '个', color: '#FF6E6E', name: '3' },
        { label: '运维总数', value: '1', prop: 'om', unit: '次', color: '#745EF2', name: '4' },
        // { label: '累计报警', value: '5', prop: 'alarm', unit: '次', color: '#FC8382', name: '5' },
        { label: '运维频次', value: '1', prop: 'frequency', unit: '次/月', color: '#7B9CE3', name: '7' },
        // { label: '平均响应时长', value: '4', prop: 'avgResTime', unit: 'h', color: '#61BDFB', name: '6' },
        { label: '最近一次运维时间', prop: 'date', unit: '2025-06-09', color: '#FFBF10', name: '8' },
      ],
      formData: {
        regionId: '',
        areaName: '请选择'
      },
      dataTree: [],
      addressObj: {
        city: null,
        area: null,
        street: null,
      },
      queryParams: {
        regionId: '',
        status: '',
      },
      // queryParams: {
      //   regionId: '',
      //   status: '',
      // },
      showEquContent: false,
      markerData: {},
      deviceList: [],
      key: '12fb99284d05be950e1927ae14ac698a',
      webKey: 'b09437d7d22d74a15b89e04e5fa9286f',
      search: '',
      longitude: 120.094976, //经度
      latitude: 28.896205, //维度
      // longitude: null, //经度
      // latitude: null, //维度
      scale: 11, //地图默认缩放等级
      markers: [], //点位数据
      showModal: false, //弹框显隐
      modalData: {}, //详情信息
      orgType: '',
      // pageType: ''
    }
  },
  computed: {
    avatar() {
      return uni.getStorageSync('avatar') || require('@/static/yunwei/avatar.png')
    }
  },
  onReady() {
    this.getAddress()
    this.getVillagePoint()

  },
  onLoad() {
    this.amapPlugin = new amap.AMapWX({
      key: this.key //该key 是在高德中申请的微信小程序key
    });
    // uni.$on('terminalStatus', (data) => {  // 查询操作
    //   this.markers = []
    //   this.queryParams.status = data
    //   // 查询终端点位
    //   this.loadMarkers()
    //   console.log(data, 'terminal')
    // })
    // uni.$on('deviceStatus', async (data) => { // 查询操作
    //   this.markers = []
    //   this.queryParams.status = data
    //   // this.queryParams.regionId = this.formData.regionId
    //   console.log(data, 'device')
    //   // 查询设备点位
    //   this.pipPointQuery()
    // })
    // this.orgType = uni.getStorageSync('orgType')
  },
  onShow() {
    //⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
    uni.hideTabBar({
      animation: false
    })
    // if (this.orgType !== '6') {
    //   // 二级设置navigate-bar标题
    //   wx.setNavigationBarTitle({
    //     title: '区域地图'
    //   })
    // }
  },
  async mounted() {
    this.queryParams.regionId = uni.getStorageSync('regionId') || uni.getStorageSync('departIds').split(',')[0]
    // await this.getVillagePoint()
    // await this.loadMarkers()
    // await this.pipPointQuery()
    this.getAreaTree()


  },
  methods: {
    toWorkAuditPage() {
      this.$tab.navigateTo('/subpack_Manage/workAudit/index')
    },
    openAreaDataStatistic() {
      this.showAreaData = !this.showAreaData
    },
    toClickDatePicker() {
      console.log(this.$refs.datePicker, '触发')
      this.$refs.datePicker.show()
    },
    nodeClick(e) {
      console.log('节点被点击', this.formData.regionId, e)
      const { id, departName } = e
      this.formData.areaName = departName
      this.areaId = id
      this.getDefaultAddress(departName)
      this.getVillagePoint()
    },
    toMine() {
      this.$tab.navigateTo('/pages/mine/index')
    },
    // 查询区域下村庄点位
    getVillagePoint() {
      this.markers = []
      getVillagePoint({ areaId: this.areaId }).then(({ data }) => {
        console.log(data, 'data--村庄点位')
        data.data.forEach((item, index) => {
          const [longitude, latitude] = wgs84togcj02(item.longitude, item.latitude)
          // if(!this.longitude && longitude) this.longitude = longitude
          // if(!this.latitude && latitude) this.latitude = latitude
          if (longitude) this.longitude = longitude
          if (latitude) this.latitude = latitude
          const iconPath = item.type === 1 ? '../../../static/manage/villageNachangIcon.png' : // 纳场
            item.status === 2 ? '../../../static/manage/villageUnOnlineIcon.png' : // 未运行 灰
              item.policeStatus === 2 ? '../../../static/manage/villageBreakIcon.png' : // 运行异常 红
                '../../../static/manage/villageIcon.png' // 正常
          const color = item.type === 1 ? 'rgba(116, 205, 175, 0.75)' : // 纳场
            item.status === 2 ? 'rgba(142, 142, 142, 0.75)' : // 未运行 灰
              item.policeStatus === 2 ? 'rgba(252, 131, 130, 0.75)' : // 运行异常 红
                'rgba(60, 138, 255, 0.75)'

          const width = 22
          const height = 28
          this.markers.push({
            iconPath,
            id: index,
            latitude: latitude,
            longitude: longitude,
            villageId: item.villageId,
            areaId: item.areaId,
            areaName: item.areaName,
            // zIndex: item.status === 1 ? 1 : 2,
            width,
            height,
            customCallout: {
              content: item.areaName,
              color: '#ffffff',
              fontSize: 12,
              borderRadius: 4,
              bgColor: color,
              padding: 4,
              borderRadius: 15,
              display: 'ALWAYS',
              anchorY: 50
            },
          })
        })
        console.log(this.markers)
      })
    },
    // 查询村庄信息
    getVillageInfoStatistic(villageId) {
      getVillageInfoStatistic({ villageId }).then(({ data }) => {
        console.log(data, 'dataaaa')
        this.villageInfo = data.data
        this.terminalList = data.data.voList
      })
    },
    toVillageDetail(villageInfo) {
      this.$tab.navigateTo(`/subpack_Manage_VillageDetail/villageDetail/index?villageId=${villageInfo.villageId}&villageName=${villageInfo.villageName}&attr=${villageInfo.attr}`)
    },
    toYunweiStatistic() {
      this.$tab.navigateTo(`/subpack_Manage/statisticYunwei/index?formData=${JSON.stringify(this.formData)}`)
    },
    /** 获取设备地图点位 */
    async pipPointQuery() {
      console.log(this.queryParams, 'this.queryParams')
      const res = await pipPointQuery(this.queryParams)
      const pointList = res.data.data
      const _this = this
      pointList.forEach((item, index) => {
        const iconList1 = ['../../static/area/设备-未激活-进.png', '../../static/area/设备-在线-进.png', '../../static/area/设备-离线-进.png']
        const iconList2 = ['../../static/area/设备-未激活-出.png', '../../static/area/设备-在线-出.png', '../../static/area/设备-离线-出.png']
        // 1 进水口
        const iconPath = item.impExp === 1 ? iconList1[item.status - 1] : iconList2[item.status - 1]
        const [longitude, latitude] = wgs84togcj02(item.longitude, item.latitude)
        const width = 32
        const height = 43
        this.markers.push({
          iconPath,
          id: index + _this.markers.length,
          latitude: latitude,
          longitude: longitude,
          pipPointNo: item.pipPointNo,
          terminalId: item.terminalId,
          terId: item.id,
          terminalName: item.terminalName,
          zIndex: item.status === 1 ? 1 : item.status === 2 ? 3 : item.status === 3 ? 2 : 0,
          width,
          height
        })
      })
      console.log(this.markers, 'maerkersskksskk')

    },
    /** 获取终端点位 */
    async loadMarkers() {
      this.markers = []
      // 终端点位
      const { data } = await terminalMapPointQuery(this.queryParams)
      const pointList = data.data
      pointList.forEach((item, index) => {
        const [longitude, latitude] = wgs84togcj02(item.longitude, item.latitude)
        const iconPath = item.status === 1 ? '../../static/area/terminal-process.png' : '../../static/area/terminal-unprocess.png'
        const width = 32
        const height = 43
        this.markers.push({
          iconPath,
          id: index,
          latitude: latitude,
          longitude: longitude,
          terminalId: item.terminalId,
          terId: item.id,
          terminalName: item.terminalName,
          zIndex: item.status === 1 ? 1 : 2,
          width,
          height
        })
      })
      console.log(this.markers)
    },
    /** 初始化位置 */
    async initAddress() {
      const regionId = uni.getStorageSync('departIds') // 多个区域，默认第一个
      this.formData.regionId = regionId.split(',')[0]
      // uni.setStorageSync('regionId', this.formData.regionId);
      const nodePath = await getNodePath({ id: this.formData.regionId }, this.dataTree)
      console.log(this.dataTree, this.formData.regionId, nodePath, '1111')
      if (nodePath.length) this.formData.areaName = nodePath[nodePath.length - 1]
      // this.getDefaultAddress(nodePath.join(''))
      this.jumpArea(this.formData.regionId, nodePath.join(''))
    },
    /** 获取区域树 */
    async getAreaTree() {
      const res = await getAreaTreeList()
      this.dataTree = res.data.data
      console.log(this.dataTree, 'tree--获取到选择区域树')
      this.$nextTick(() => {
        this.initAddress()
      })
    },
    /** 区域级联值改变 切换区域不用存缓存 */
    async onchange(e) {
      this.queryParams.regionId = this.formData.regionId = e.detail.value[e.detail.value.length - 1].value
      const areaName = e.detail.value.map(item => item.text).join('·')
      // const areaName = e.detail.value[e.detail.value.length-1].text
      console.log(e, this.queryParams, 'value')
      // uni.setStorage({
      //   key: 'address',
      //   data: addressDetail,
      //   success: () => {
      //     console.log('地址已存入缓存')
      //   }
      // })
      // uni.setStorageSync('regionId', regionId);
      this.jumpArea(this.queryParams.regionId, areaName)
    },
    /** 传regionId跳转 默认跳第一个终端位置 （不用存缓存）*/
    async jumpArea(regionId, regionName) {
      const { data: points } = await terminalMapPointQuery({ regionId })
      const terminalList = points.data
      if (terminalList.length) {
        const [longitude, latitude] = wgs84togcj02(terminalList[0].longitude, terminalList[0].latitude)
        this.latitude = latitude
        this.longitude = longitude
        // const c = longitude + ',' + latitude
        // uni.setStorage({ key: "userLocation", data: c })
      } else {
        this.getDefaultAddress(regionName)
      }
    },

    /** 获取默认位置 */
    getDefaultAddress: Debounce(function (addressName) {
      console.log(addressName, 'addressName')
      const address = addressName || '浙江省金华市婺城区迎宾大道688号'
      const baseUrl = `https://restapi.amap.com/v3/geocode/geo?address=${address}&key=${this.webKey}`
      uni.request({
        url: baseUrl,
        // data: {
        //     text: 'uni.request'
        // },
        success: async (res) => {
          console.log(res.data);
          if (res.data.info !== 'OK') {
            this.$modal.msgError('请输入有效地址！')
            return
          }
          const { city, formatted_address, district, location } = await res.data.geocodes[0]
          const streetArr = formatted_address.split('市')
          this.addressObj = {
            city,
            area: district,
            street: addressName ? streetArr[streetArr.length - 1] : '浙江师范大学'
          }
          if (!addressName) {
            uni.setStorage({
              key: 'address',
              data: this.addressObj,
              success: () => {
                console.log('地址已存入缓存')
              }
            })
          }
          this.longitude = location.split(',')[0]
          this.latitude = location.split(',')[1]
          const c = this.longitude + ',' + this.latitude
          uni.setStorage({ key: "userLocation", data: c })
        }
      });
      console.log(addressName, '防抖操作')
    }, 500),
    // },
    // async getDefaultAddress(addressName) {
    //   Debounce(() => {
    //     const address = addressName.detail || addressName || '浙江省金华市婺城区迎宾大道688号'
    //     const baseUrl = `https://restapi.amap.com/v3/geocode/geo?address=${address}&key=${this.webKey}`
    //     uni.request({
    //       url: baseUrl,
    //       // data: {
    //       //     text: 'uni.request'
    //       // },
    //       success: async (res) => {
    //         console.log(res.data);
    //         const { city, formatted_address, district, location } = await res.data.geocodes[0]
    //         const streetArr = formatted_address.split('市')
    //         this.addressObj = {
    //           city,
    //           area: district,
    //           street: addressName ? streetArr[streetArr.length - 1] : '浙江师范大学'
    //         }
    //         if (!addressName) {
    //           uni.setStorage({
    //             key: 'address',
    //             data: this.addressObj,
    //             success: () => {
    //               console.log('地址已存入缓存')
    //             }
    //           })
    //         }
    //         this.longitude = location.split(',')[0]
    //         this.latitude = location.split(',')[1]
    //         const c = this.longitude + ',' + this.latitude
    //         uni.setStorage({ key: "userLocation", data: c })
    //       }
    //     });
    //     console.log('防抖操作')
    //   }, 100)
    // },
    /** 切换地址 */
    changeAddressTo() {
      this.$tab.navigateTo('/subpak_mobile_monitor/common/addressChange/index')
    },
    /** 去搜索 */
    toSearch() {
      this.$tab.navigateTo(`/subpak_mobile_monitor/common/search/index?dashboard=${true}`)
    },
    /** 引导打开设置页面 */
    openSetting() {
      // this.getDefaultAddress()
      wx.showModal({
        title: '提示', //提示的标题,
        content: '请打开定位权限', //提示的内容,
        showCancel: true, //是否显示取消按钮,
        cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
        cancelColor: '#000000', //取消按钮的文字颜色,
        confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
        confirmColor: '#3CC51F', //确定按钮的文字颜色,
        success: res => {
          if (res.confirm) {
            // openSetting 是需要事件驱动的，保证它的同步性。
            wx.openSetting({
              success(res) {
                console.log(res, 'wx.openSetting')
              },
              fail(res) {
                console.log(res, 'wx.opensetting fail')
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
            wx.showToast({
              title: '需要定位权限',
              icon: 'none',
              duration: 2000,
            })
          }
        }
      });
    },
    /** 获取位置 --查询用户位置授权 */
    getAddress() {
      /** 获取用户授权信息 */
      const that = this
      wx.getSetting({
        success: (res) => {
          console.log(res.authSetting['scope.userLocation'], '授权了吗')
          if (!res.authSetting['scope.userLocation']) {
            console.log('需要唤起授权')
            wx.authorize({
              scope: 'scope.userLocation',
              success: () => {
                // 用户已经同意小程序使用定位功能
                this.getGeoLocation()
              },
              fail(e) {
                console.log("scope.userInfo error", e);
                // that.$modal.msg('需要打开位置权限')
                that.openSetting()
              }
            })
          } else {
            // 已授权直接获取定位
            // this.getGeoLocation()
          }
        }
      })

    },
    /** 高德获取当前位置 */
    getGeoLocation() {
      this.amapPlugin.getRegeo({
        success: (res) => {
          console.log(res, res[0].regeocodeData.formatted_address)
          const { latitude, longitude, regeocodeData: { addressComponent } } = res[0]
          this.latitude = latitude
          this.longitude = longitude
          this.addressObj = {
            city: addressComponent.city,
            area: addressComponent.district,
            street: addressComponent.township
          }
          uni.setStorage({
            key: 'address',
            data: this.addressObj,
            success: () => {
              console.log('地址已存入缓存')
            }
          })
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    // async delSearch() {
    //   this.search = '';
    //   this.loadMarkers();
    //   this.deviceList= []

    // },

    // 点击标记点时触发
    async markertap(e) {
      for (let i of this.markers) {
        if (i.id === e.detail.markerId) {
          console.log(e, i, '点击标记点')
          const { villageId, longitude, latitude } = i
          this.longitude = longitude
          this.latitude = latitude
          this.villageId = villageId
          this.getVillageInfoStatistic(villageId)
          // this.$tab.navigateTo(`/subpack_TerminalDevice/terminal/detail/index?terminalId=${i.terminalId}&terminalName=${i.terminalName}&id=${i.terId}`)
        }
      }
      //点击 marker 时触发，获取对应的点位信息并展示弹框
      // this.markers.forEach(marker => {
      //   if (marker.id === e.detail.markerId) {
      //     this.modalData = marker
      //     marker.iconPath = marker.pipPointNo === 'YKWS1' ? '@/static/icon/入-选中.png' : marker.pipPointNo === 'YKWS2' ? '@/static/icon/出-选中.png': marker.single ? '@/static/icon/单设备-选中.png' : '@/static/icon/多设备-选中.png'
      //   } else {
      //     marker.iconPath = marker.pipPointNo === 'YKWS1' ? '@/static/icon/入-未选中.png' : marker.pipPointNo === 'YKWS2' ? '@/static/icon/出-未选中.png': marker.single ? '@/static/icon/单设备-默认.png' : '@/static/icon/多设备-默认.png'
      //   }
      // });
      // // let markerData = this.markers.find(marker => marker.id === e.detail.markerId);
      // const { longitude, latitude, pipPointNo } = this.modalData
      // this.longitude = longitude
      // this.latitude = latitude
      // const { data: { data } } = await deviceListPage({ pipPointNo:pipPointNo, pageSize: 10, pageNum: 1 })
      // const { records } = JSON.parse(JSON.stringify(data))
      // this.deviceList = records
      // this.showEquContent = true
    },
    /** 底部按钮点击事件 */
    async toDeviceList(type, index) {
      const param = index || index === 0 ? this.deviceList[index].equNo : ''
      console.log(type, param, 'params')
      if (type) {
        console.log('1')
        param ? this.$tab.navigateTo(`/subpak_mobile_monitor/device/index?equNo=${param}`) : this.$tab.reLaunch(`/subpak_mobile_monitor/device/index`)
      } else {
        console.log('2')
        param ? this.$tab.navigateTo(`/subpak_mobile_monitor/monitor/index?equNo=${param}`) : this.$tab.reLaunch(`/subpak_mobile_monitor/monitor/index`)
      }
    }
  }
}
</script>
<style>
.uni-data-tree-input {
  display: none !important;
}
.searchClass {
  padding-left: 0 !important;
}
</style>
<style lang="scss" scoped>
::v-deep .searchClass .van-search__content {
  background-color: #fff !important;
}
.areaNameMarker {
  background: rgba(60, 138, 255, 0.75);
  padding: 2rpx 14rpx;
  border-radius: 26rpx;
  font-weight: bold;
  font-size: 24rpx;
  color: #ffffff;
  text-align: center;
}
.selectArea {
  width: 168rpx;
  white-space: nowrap;
  .dataInputText {
    border-right: 2rpx solid #ebebeb;
    font-size: 28rpx;
    color: #4a4a4a;
    line-height: 60rpx;
    padding: 0 12rpx;
    .selectIcon {
      margin: 0 12rpx;
    }
  }
}
.rightBottomContent {
  position: absolute;
  right: 32rpx;
  bottom: 32rpx;
  font-size: 24rpx;
  color: #5e5e5e;
  background: #fff;
  padding: 20rpx;
  text-align: center;
  border-radius: 6rpx;
  .operateIcon {
    width: 37rpx;
    height: 34rpx;
    margin: 14rpx 0;
  }
  .defaultAvatar {
    width: 80rpx;
    height: 80rpx;
    margin-top: 30rpx;
    border-radius: 50rpx;
  }
}
.leftBottomContent {
  width: 346rpx;
  height: 554rpx;
  background: #fff;
  position: absolute;
  left: 26rpx;
  bottom: 32rpx;
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 10rpx;
  // box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
}
::v-deep .van-search {
  padding-left: 0 !important;
}
::v-deep .van-search--withaction {
  padding-left: 0 !important;
}
.topContent {
  position: absolute;
  top: 20rpx;
  z-index: 9999;
  width: calc(100% - 72rpx);
  margin: 0 36rpx;
  --search-background-color: #fff;
  .terminal-card {
    background: #fff;
    border-radius: 6rpx;
    padding: 16rpx 20rpx;
    position: relative;
    .packUpIcon {
      width: 34rpx;
      height: 34rpx;
      position: absolute;
      left: 50%;
      top: -17rpx;
      transform: translate(-50%, 0);
    }
    .card-title {
      font-weight: 800;
      font-size: 28rpx;
      color: #4a4a4a;
      .marClass {
        margin-left: 16rpx;
      }
      .title-icon {
        display: inline-block;
        width: 8rpx;
        height: 20rpx;
        background: rgba(39, 105, 247, 0.6);
        border-radius: 6rpx;
        margin: 0 14rpx;
      }
      .descBusiness {
        font-size: 20rpx;
        color: #5e5e5e;
        margin-left: 12rpx;
      }
    }
    .infoList {
      display: flex;
      flex-wrap: wrap;
      // gap: 14rpx;
      .infoItem {
        margin: 14rpx 0;
        padding: 0 29rpx;
        text-align: center;
        border-right: 1rpx solid #ebebeb;
        line-height: 32rpx;
        font-size: 24rpx;
        color: #686868;
        .infoValue {
          .value {
            font-size: 36rpx;
            font-weight: 800;
          }
          .unit {
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .terminalStatus {
    background: #fff;
    padding: 16rpx 20rpx;
    font-weight: bold;
    font-size: 24rpx;
    color: #686868;
    text-align: center;
    margin-top: 20rpx;
    .icon {
      width: 27rpx;
      height: 27rpx;
      vertical-align: middle;
      margin: 12rpx;
    }
    .statusText {
      color: #3c8aff;
      margin-left: 32rpx;
    }
  }
}
.van-search__content {
  background-color: #fff;
}
#map {
  width: 100%;
  height: calc(100vh - 60rpx);
}
.heightMini {
  height: calc(100vh - 180rpx) !important;
  width: 100%;
}
</style>
